// bronnen:	http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/#demo-simple
//			http://permadi.com/blog/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/

/**
 * Controls the drawing of the user and sends it
 */
var drawing = {
	
	/**
	 * Contains canvas element
	 */
	canvas: 	null,
	
	/**
	 * Contains context of canvas
	 */
	context: 	null,
	
	/**
	 * Offset x, y
	 */
	xpos:		60,
	ypos: 		220,
	
	/**
	 * Width/height of drawing area
	 */
	width:		240,
	height:		270,
	
	/**
	 * Array of clicks on the x/y-as
	 */
	clickX: 	new Array(),
	clickY: 	new Array(),
	
	/**
	 * Array to keep track wether it is dragged or not for maintaining lines between clicks
	 */
	clickDrag: 	new Array(),
	
	/**
	 * Indicates if it is painting or not
	 */
	paint: 		false,
	
	/**
	 * Setup drawing area
	 */
	setCanvas: function(){
		// init
		var canv = content.document.createElement('canvas');
			canv.id = "piraat-drawArea";
			canv.width = drawing.width;
			canv.height = drawing.height;
		
		// the user is started to paint
		canv.addEventListener("mousedown", function(e){
			var mouseX = e.pageX - (this.parentNode.parentNode.offsetLeft+content.document.documentElement.scrollLeft+drawing.xpos);
			var mouseY = e.pageY - (this.parentNode.parentNode.offsetTop+content.document.documentElement.scrollTop+drawing.ypos);
			drawing.paint = true;
			drawing.addClick(mouseX, mouseY);
			drawing.redraw();
		});
		
		// the user is dragging
		canv.addEventListener("mousemove", function(e){
			if(drawing.paint){
				var mouseX = e.pageX - (this.parentNode.parentNode.offsetLeft+content.document.documentElement.scrollLeft+drawing.xpos);
				var mouseY = e.pageY - (this.parentNode.parentNode.offsetTop+content.document.documentElement.scrollTop+drawing.ypos);
				drawing.addClick(mouseX, mouseY, true);
				drawing.redraw();
			}
		});
		
		// the user has stopped to paint
		canv.addEventListener("mouseup", function(e){
			drawing.paint = false;
		});
		
		// the user has left the drawing area
		canv.addEventListener("mouseleave", function(e){
			drawing.paint = false;
		});
		
		// set up canvas element
		var panel = content.document.getElementById('piraat-panel');
		var title = content.document.createElement('div');
		title.id = 'piraat-drawingTitle'
		title.appendChild(document.createTextNode('Maak hier een tekening bij het woord.'))
		panel.appendChild(title);
		drawing.canvas = panel.appendChild(canv);
		drawing.context = drawing.canvas.getContext("2d");
		
		// add clear button
		var clear = content.document.createElement('button');
			clear.id = "piraat-clearDrawing";
			clear.onclick = drawing.clearArea;
		panel.appendChild(clear);
	},

	/**
	 * Reset drawing area
	 */
	clearArea: function(){
		drawing.clickX = new Array();
		drawing.clickY = new Array();
		drawing.clickDrag = new Array();
		drawing.paint = false;
		drawing.redraw();
	},
	
	/**
	 * Add a position of the mouse within the drawing area
	 * @param Int x Position-x
	 * @param Int y Position-y
	 * @param Boolean dragging Dragged or not
	 */
	addClick: function(x, y, dragging){
		drawing.clickX.push(x);
		drawing.clickY.push(y);
		drawing.clickDrag.push(dragging);
	},
	
	/**
	 * Displays the painting
	 */
	redraw: function(){
		// Clears the canvas
		drawing.canvas.width = drawing.canvas.width;
		
		// init painting style
		drawing.context.strokeStyle = "#000000";
		drawing.context.lineJoin = "round";
		drawing.context.lineWidth = 5;
		
		// loop through all clicks and start painting
		for(var i=0; i < drawing.clickX.length; i++){
			drawing.context.beginPath();
			if(drawing.clickDrag[i] && i){
				drawing.context.moveTo(drawing.clickX[i-1], drawing.clickY[i-1]);
			}else{
				drawing.context.moveTo(drawing.clickX[i]-1, drawing.clickY[i]);
			}
			drawing.context.lineTo(drawing.clickX[i], drawing.clickY[i]);
			drawing.context.closePath();
			drawing.context.stroke();
		}
	},
	
	/**
	 * Send the painting to the specified server
	 */
	sendDrawing: function(){
		if(drawing.clickDrag.length == 0) return;
		var img = drawing.canvas.toDataURL("image/png");		
		var req = new XMLHttpRequest();
		req.open("POST", Woordenschat.url + 'php/index.php?task=saveDrawing&word='+Woordenschat.word,false);
		req.setRequestHeader('Content-Type', 'application/upload');
		req.onreadystatechange = function() {
			if(req.readyState == 4) {
			}
		}
		req.send('task=saveDrawing&word='+Woordenschat.word+'&'+img);
	}
}